<style lang="scss" scoped>

   $font-color:#777;

   $green:#1fc6a0;

   .half-width{
     width:50%;
   }

   .full-width{
     width:100%;
   }

   .line{
     height: 40px;
     position: relative;
     margin: 15px 0;
     float: left;
   }

   .font{
     font-size: 16px;
     font-family: '微软雅黑';
     color: $font-color;
   }

   .add-input-label{
     @extend  .font;
     height: 40px;
     line-height: 40px;
     display: block;
     position: absolute;
     left:0;
     top:0;
     text-align: center;
   }

  .wrapper{
    padding-left: 70px;
    height: 40px;
    width:100%;
    padding-right: 10px;
    position: relative;
    .input-box{
      width:100%;
      outline:none;
      height: 34px;
      margin-top: 3px;
      padding: 0 5px;
      border: #ccc solid 1px;
      border-radius: 3px;
      /*border-radius: 3px;*/
      &:focus{
        box-shadow: 0 0 3px $green inset;
        border: 1px solid $green;
      }
    }

    span{
      position: absolute;
      right:10px;
      top:0;
      width:40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      display: inline-block;
      color: #777;
    }

    .icon-search{
      @extend span;
      width:30px;
      height: 30px;
      margin-top: 5px;
      background-size: cover;
      background-image: url("../../../../../assets/images/query-inner.png");
      right:15px;
      cursor: pointer;
    }

  }


</style>

<template>
  <div class="line" :class="{'half-width':size==1,'full-width':size==2}">
      <span class="add-input-label" :style="{width:labelWidth+'px'}">{{label}}</span>
      <div class="wrapper" :style="{paddingLeft:(labelWidth+10)+'px',paddingRight:(right+10)+'px'}" >
        <input :type="type" class="input-box"  v-on:input="change($event.target.value)" v-bind:value="value"
         :placeholder="placeholder" :disabled="disabled" />
        <slot name="other">

        </slot>
      </div>
  </div>
</template>

<script>

  export default {
      name:"InputBox",
      props:{
        type:{
          type:String,
          default:'text'
        },
        placeholder:{
          type:String,
          required:false,
          default:'请输入'
        },
        labelWidth:{
          type:Number,
          required:false,
          default:60
        },
        size:{
          type:Number,
          required:false,
          default:1
        },
        label:{
          type:String,
          required:true,
          default:'标签1'
        },
        value:{
          type:String,
          required:true,
          default:''
        },
        disabled:{
          type:Boolean,
          required:false,
          default:false
        }
      },
      beforeMount(){

          var counter=0;

          for(var key in this.$slots){

            if (this.$slots.hasOwnProperty(key)){
              counter++;
            }

         }

         if (counter<=0){
            this.right=0;
         }
         else{
           this.right=50;
         }

      },
      data(){
        return {
          right:0
        }
      },
      methods:{
        change(val){
          this.$emit('input',val);
        },
      }
  }
</script>
